<script setup lang="ts">
import { ref, toRef, readonly, computed } from "vue";

import type { ElForm } from 'element-plus'
type FormInstance = InstanceType<typeof ElForm>

const props = defineProps<{ specList: { code: string, name: string }[], data: { spec: {}, quantity: number, price: string | number }[], brand:{} }>()
const tableData = toRef(props, 'data')
const specList = toRef(props, 'specList')
const brand = toRef(props, 'brand')

const list = computed(() => {
    let priceTotal = 0
    const arr = tableData.value.map(item => {
        const total = (typeof item.price === 'number' ? item.price : 0) * item.quantity
        priceTotal = priceTotal + total
        return {
            ...item,
            total,
            isTotal: false
        }
    })
    if (arr.length > 0) {
        arr.push({ spec: {}, quantity: 0, price: 0, total: priceTotal, isTotal: true })
    }
    return arr
})

const totalSpanMethod = ({ row, columnIndex }: any): any => {
    const columnCount = specList.value.length + 2
    if (row.isTotal) {
        if (columnIndex === 0) {
            return [1, columnCount]
        }
        if (columnIndex < columnCount) {
            return [0, 0]
        }
    }
}

const rules = {
    receiver: [{
        required: true,
        message: '收货人必填',
        trigger: 'blur',
    }],
    mobile: [{
        required: true,
        message: '联系电话必填',
        trigger: 'blur',
    }, {
        pattern: /^1[0-9]{10}$/, message: '联系电话格式不正确', trigger: 'blur'
    }],
    address: [{
        required: true,
        message: '收货地址必填',
        trigger: 'blur',
    }],
    expectDate: [{
        required: true,
        message: '收货日期必填',
        trigger: 'blur',
    }]
}
const formData = ref({
    receiver: "",
    address: "",
    mobile: "",
    expectDate: "",
    packing: "",
    remark: ""
})

const emit = defineEmits(['back'])

const handleBack = () =>{
    emit('back')
}
const formRef = ref<FormInstance>()
const handleSubmit = async (formEl?: FormInstance)=>{
    if (!formEl) {
        return
    }
    try {
        const result = await formEl.validate();
        if (result) {
            console.log(readonly(tableData.value))
            console.log(readonly(brand.value))
        }
    } catch (error) {
    }
}

</script>

<template>
    <div class="order">
        <div class="title">生成订单</div>
        <div class="goods">
            <el-table :data="list" border :span-method="totalSpanMethod">
                <el-table-column v-for="spec in specList" :label="spec.name">
                    <template #default="{ row }">
                        <div v-if="row.isTotal" class="total-text">合计</div>
                        <span v-else>{{row.spec[spec.code]?.value }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" label="数量" />
                <el-table-column prop="price" label="单价" />
                <el-table-column prop="total" label="总价">
                    <template #default="{ row }">{{ row.total }}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="info">
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-position="left"
                label-width="120px"
                class="order-form"
            >
                <el-form-item label="收货人：" prop="receiver">
                    <el-input v-model="formData.receiver" placeholder="请输入收货人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" prop="mobile">
                    <el-input v-model="formData.mobile" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="送货地址：" prop="address">
                    <el-input v-model="formData.address" placeholder="请输入送货地址"></el-input>
                </el-form-item>
                <el-form-item label="收货日期：" prop="expectDate">
                    <el-date-picker
                        v-model="formData.expectDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择收货日期"
                        class="date-picker"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="包装要求：">
                    <el-input v-model="formData.packing" placeholder="请输入包装要求"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input
                        v-model="formData.remark"
                        :rows="4"
                        type="textarea"
                        placeholder="请输入备注"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSubmit(formRef)" type="primary">立即下单</el-button>
                    <el-button @click="handleBack">返回报价</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.order {
    max-width: 800px;
    margin: 0 auto;
    .title {
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        color: #000;
        padding: 12px 0px 24px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
    }
    .goods {
        margin-top: 12px;
        .total-text {
            text-align: center;
        }
        .el-table {
            --el-table-border: 1px solid #ddd;
            --el-table-tr-bg-color: #fff;
            --el-table-header-bg-color: #f5f7fa;
            --el-table-row-hover-bg-color: #fff;
        }
        :deep(.el-table .el-table__cell) {
            padding: 4px 0px;
        }
        :deep(.el-table__inner-wrapper::before) {
            height: 1px;
            background-color: #ddd;
        }
    }
    .info {
        margin-top: 24px;
        .order-form {
            :deep(.el-form-item__label) {
                --el-form-label-font-size: 18px;
            }
            :deep(.el-date-editor.el-input) {
                width: 100%;
            }
        }
    }
}
</style>
